<template>
    <!--柱状图-->
    <div class="histogram-fission">
        <div class="histogram-fission-title">活动裂变层级统计</div>
        <div v-show="isData" id="echart3" class="account-display-echart" ref="histogramChart"></div>
        <div v-show="!isData" class="histogram-fission-no-data">暂无数据</div>
    </div>
</template>

<script>
    import API from '../../../../api/mp/gameData'

    export default {
        name: 'HistogramFission',
        data () {
            return {
                initEchart: '',
                isData: true,
                option: {
                    color: ['#40a9ff'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        width: '500px',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisTick: {
                                alignWithLabel: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            minInterval: 1
                        }
                    ],
                    series: [
                        {
                            name: '活动裂变层级统计',
                            type: 'bar',
                            barWidth: '30%',
                            data: []
                        }
                    ]

                }
            }
        },
        methods: {
            init (gameId, mpId, gzhUserId) {
                API.fissionLevel({ gzhUserId: gzhUserId || '', gameId: gameId || '', mpId: mpId || '' }).then(res => {
                    if (res.length === 0) {
                        this.isData = false
                    } else {
                        this.isData = true
                    }
                    this.formatData(res)
                    this.initEchart = 'init'
                    const histogramChart = window.echarts.init(this.$refs.histogramChart)
                    histogramChart.setOption(this.option)
                })
            },
            formatData (list) {
                if (this.initEchart) {
                    this.option.xAxis.data = []
                    this.option.series[0].data = []
                }
                const axisList = []
                const tempList = []
                list.forEach(item => {
                    axisList.push(String(item.level ? item.level : '种子') + '级')
                    tempList.push(item.count)
                })
                this.option.xAxis[0].data = axisList
                this.option.series[0].data = tempList
            }
        }
    }
</script>

<style lang="less">
    .histogram-fission {
        padding: 0 20px;
        height: 340px;
        min-width: 600px;
        background: white;
        overflow: hidden;

        .histogram-fission-title {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }

        .histogram-fission-no-data {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
        }

        .account-display-echart {
            width: 600px;
            min-height: 250px;
        }
    }
</style>
